<template>
	<view class="container">
		<tui-navigation-bar :isFixed="true" :isOpacity="true" splitLine :zIndex="99999" :scrollTop="0"
			backgroundColor="#ffffff" color="#333">
			<view style="height: 40px;display: flex;align-items: center;justify-content: center;">
				<view class="tips" @click="handleCommunityClick">广场</view>
				<view class="tips activeTab" style="margin-left: 20rpx;">聊天</view>
			</view>
		</tui-navigation-bar>
		<view :style="{height: headerHeight + 'px'}" style="background-color: #ffffff;"></view>
		<view class="header">
			<view class="search">
				<u-input border="none" placeholder="搜索用户、俱乐部、活动" prefixIcon="search"
					prefixIconStyle="font-size: 24px;font-weight: 350;color: #A9A9A9;padding-left:16rpx;"
					v-model="searchValue"></u-input>
			</view>
		</view>
		<view class="content-container">
			<view class="box">
				<view class="avatar-bg">
					<u-icon name="email" size="80" color="#fff"></u-icon>
				</view>
				<view class="title">系统通知</view>
				<view class="content">没有新通知</view>
				<view class="date">11-08</view>
				<view class="border">
				</view>
			</view>
		</view>
		<view v-for="(item, index) in 5" :key="index">
			<view class="content-container">
				<view class="box">
					<image class="avatar" src="../../cutout/圆形 5@1x.png"></image>
					<view class="title">装爱心的阿迪</view>
					<view class="content">米有新的活动了</view>
					<view class="date">11-08</view>
					<view class="border">
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- <view>
		<view style="height: 24rpx;"></view>
		<view class="cell" v-for="item in messageList" :key="item.messageType" @click="handleMessage(item.messageType)">
			<image :src="item.messageTypePic" />
			<view class="cell-info">
				<view class="cell-text" :class="item.unReadCount > 0 ? 'active': ''">{{texts[item.messageType]}}</view>
				<view class="cell-desc">{{item.messageContent}}</view>
			</view>
		</view>
		<view class="cell">
			<image src="../../static/logo.png" />
			<view class="cell-info">
				<view class="cell-text">互动消息</view>
				<view class="cell-desc">暂无消息</view>
			</view>
		</view>
		<view class="cell">
			<image src="../../static/logo.png" />
			<view class="cell-info">
				<view class="cell-text">滴滴</view>
				<view class="cell-desc">暂无消息</view>
			</view>
		</view> 
	</view> -->
</template>

<script>
	import {
		getMessageTypeList
	} from '../../config/api.js';
	import {
		to
	} from '../../config/utils.js';

	export default {
		data() {
			return {
				texts: {
					10: '通知',
					20: '互动消息',
					30: '滴滴'
				},
				messageList: [],
				headerHeight: 84,
				searchValue: "",
			}
		},
		onLoad(params) {
			this.params = params;
			let system = getSystemInfo();
			if (system) {
				this.headerHeight = 44 + (system.statusBarHeight || 20);
			}
		},
		onShow() {
			// this.fetchMessageTypeList();
		},
		methods: {
			handleCommunityClick() {
				uni.switchTab({
					url: '/pages/community/community',
				})
			},
			/* async fetchMessageTypeList() {
				let [err, data] = await to(getMessageTypeList());
				if (err) {
					return uni.showToast({
						title: err?.msg || '获取列表失败',
						icon: 'none'
					})
				}
				this.messageList = data?.data || [];
			}, */
			/* handleMessage(messageType) {
				let url = '';
				if (messageType === 10) {
					url = '/pages/message-system/message-system'
				} else if (messageType === 20) {
					url = '/pages/message-hd/message-hd'
				} else if (messageType === 30) {
					url = '/pages/message-didi/message-didi'
				}
				uni.navigateTo({
					url: `${url}?type=${messageType}`
				})
			} */
		}
	}
</script>

<style scoped lang="scss">
	.cell {
		background-color: #fff;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
	}

	.cell image {
		width: 80rpx;
		height: 80rpx;
		margin: 35rpx 0;
		margin-right: 24rpx;
	}

	.cell-info {
		flex: 1;
		border-bottom: 1rpx solid #eee;
		padding: 35rpx 0;
	}

	.cell-info .cell-text {
		height: 40rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
		position: relative;
		display: inline-block;
	}

	.cell-info .cell-text.active::after {
		position: absolute;
		top: 0;
		right: -20rpx;
		content: ' ';
		width: 12rpx;
		height: 12rpx;
		border-radius: 20rpx;
		background-color: #F93A4A;
	}

	.cell-info .cell-desc {
		height: 36rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		margin-top: 10rpx;
	}

	.container {
		position: relative;
		padding-bottom: 140rpx;

		.tips {
			width: 60rpx;
			height: 44rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #666363;
		}

		.activeTab::after {
			position: absolute;
			content: ' ';
			left: 0rpx;
			bottom: 0rpx;
			width: 72rpx;
			height: 10rpx;
			background-color: #92E7EC;
			z-index: 99;
		}

		.activeTab {
			position: relative;
			z-index: 100;
			font-family: Source Han Sans;
			line-height: normal;
			font-size: 30rpx;
			font-weight: 500;
			color: #666363;
			padding-left: 6rpx;
		}

		.header {
			padding-top: 6rpx;
			position: relative;
			padding: 0 26rpx;
			height: 80rpx;
			background-color: #fff;

			.search {
				position: absolute;
				top: 10rpx;
				right: 26rpx;
				background-color: #F5F5F5;
				width: 392rpx;
				height: 54rpx;
				padding-right: 42rpx;
				padding-left: 20rpx;
				border-radius: 42rpx;
				border: 2px solid #F5F5F5;
			}
		}

		.content-container {
			position: relative;
			background-color: #F3F3F3;

			.box {
				position: relative;
				background-color: #F3F3F3;
				height: 160rpx;

				.avatar {
					position: absolute;
					left: 34rpx;
					top: 20rpx;
					height: 100rpx;
					width: 100rpx;
				}

				.avatar-bg {
					position: absolute;
					left: 34rpx;
					top: 20rpx;
					height: 100rpx;
					width: 100rpx;
					display: flex;
					border-radius: 100rpx;
					background-color: #64D2D8;
					justify-content: center;
					align-self: center;
				}

				.title {
					position: absolute;
					left: 174rpx;
					top: 18rpx;
					width: 192rpx;
					height: 46rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #141414;
				}

				.content {
					position: absolute;
					left: 184rpx;
					top: 76rpx;
					width: 98px;
					height: 20px;
					font-size: 14px;
					color: #AAA9AA;
				}

				.date {
					position: absolute;
					top: 24rpx;
					right: 30rpx;
					width: 32px;
					height: 17px;
					font-size: 12px;
					color: #AAA9AA;
				}

				.border {
					position: absolute;
					right: 26rpx;
					top: 138rpx;
					border-bottom: 2px solid #E8E8E8;
					width: 277px;
					height: 0px;
				}
			}
		}
	}
</style>